<!DOCTYPE html>
<html lang="zh">
<head>
	<title>HTML5和CSS3实例教程</title>
	<base href="http://locahost/notebook/html5_and_css3_develop_with_tomorrow_stands_today" />
	<meta charset="utf-8" />
	<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
<article>
	<header>
		<h1>第1章 HTML5和CSS3概述</h1>
	</header>
	<section>
		<p>HTML5中的全局lang属性使用简体或繁体中文都用zh表示。</p>
		<ul>
			<li>HTML5添加了更多的结构描述标记，使内容与表现分离</li>
			<li>添加了自己的多媒体标签audio和video</li>
			<li>可以不必借助ActiveX或Flash等第三方技术实现强大的Web应用</li>
			<li>引入一套安全且易于实现的方案实现自己可信的脚本的跨文档通信</li>
			<li>提供对WebSockets的支持，使客户端与服务器间实现持久连接及消息推送</li>
			<li>基于HTML5的Web Storage和Web SQL Database实现了客户端持久化的数据存储</li>
			<li>更精美的界面（使用CSS绘制圆角、阴影与渐变等美化功能）和强大的表单控件（实现进度和滑块等）</li>
			<li>CSS3添加了先进的选择器，可以识别奇偶数行、进行首尾选择，以及一些计算功能</li>
			<li>简化和废弃了一些标签（主要是非语义性的外观修饰标签，比如：big,center,font,s,tt等等），停用了一些属性（与表现相关的属性全部放入CSS中）target属性也被废弃了，如果想要实现它请使用JavaScript，用object取代了applet，ul取代了dir</li>
		</ul>
	</section>
	<footer>
		<p>HTML5移除了frame、frameset和noframes这几个标签，禁用了框架可以省去不少麻烦。target属性也被废除了，要实现它的功能，可以使用JavaScript。一切与修饰相关的属性也不要使用，让内容清爽。</p>
		<p>为了便于控制id属性是很重要的。</p>
	</footer>
</article>
<article>
	<header>
		<h1>第2章 新的结构标签和属性</h1>
	</header>
	<section>
		<p>使用语义化标签，不要乱用div。下面是标签的用途：</p>
		<ul>
			<li>header 定义页面或区段的头部</li>
			<li>footer 定义页面或区段的尾部</li>
			<li>nav定义页面或区段的导航区域</li>
			<li>section 定义页面的逻辑区域或内容组合</li>
			<li>article 定义正文或一篇完整的内容</li>
			<li>aside 定义补充或相关内容</li>
			<li>自定义元素属性，可以用data-为前缀向任意元素中添加自定义的数据属性（可以通过JavaScript的getAttribute()方法来取得这些属性）</li>
			<li>meter 用来描述指定范围内的数值</li>
			<li>progress 用于显示实时进度</li>
		</ul>
		<p>将section标签视为对文档逻辑结构部分的描述，而article视为对内容的描述。section内可以包含多个article，article中也可以用多个section来划分区段。</p>
		<p>不要用aside定义侧边栏，它的设计初衷是为了展示与文章相关的内容，用于呈现相关链接、术语表或引言。侧边栏应当用section定义。</p>
		<p>meter用来定义有数值范围的数据，progress用来定义进度。</p>
		<p>不要再使用onClick，为每个链接分配一个CSS的类名，在JavaScript中通过类来控制，如下：</p>
		<pre>
			&lt;a href="example.html" class="popup" data-width="300" data-height="200"&gt;Example&lt;/a&gt;
			var links = $('a.popup');	//jQuery的这个简写函数用来取得CSS选择器所指定的元素，当然，使用之前要先将jQuery导入到文档中才行

			links.click(function(event){
				event.preventDefault();
				var href = $(this).attr('href');
				var width = $(this).attr('data-width');	//读取自定义数据，窗口的宽度
				var height = $(this).attr('data-height');
				var popup = window.open(href, 'popup', 'width=' + width + ',height=' + height);	//这样就可以自动打开链接
			});
		</pre>
		<p>自定义数据减少了div的滥用状况。</p>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第3章 创建易用的Web表单</h1>
	</header>
	<section>
		<p>这一节的内容，从创建一个基础表单开始，慢慢展开新控件的特性。</p>
		<form method="post" action="index.html">
			<fieldset id="personal_informatino">
				<legend>Project Information</legend>
				<ol>
					<li><label>Name<input type="text" name="name" autofocus id="name"></label>这里用了autofocus属性来让它自动获得焦点，减少用户操作。</li>
					<li><label>Priority<input type="range" name="priority" min="0" max="10" value="0"></label></li>
					<li><label>Estimated Hours<input type="number" name="estimated_hours" min="0" max="1000"></label></li>
					<li><label>Start Date<input type="date" name="start_date" value="2015-7-30"> </label></li>
					<li><label>Email Contact<input type="email" name="email" placeholder="username@example.com">这里用了placeholder属性显示示例数据。 </label></li>
					<li><label>String URL<input type="url" name="url"> </label></li>
					<li><label>Project Color<input type="color" name="project_color"></label></li>
					<li><label>Password<input type="password" name="password" autocomplete="off" placeholder="8~10个字符">这里将autocomplete属性设置为off以阻止自动完成。</label></li>
					<li><input type="submit" value="submit"></li>
				</ol>
			</fieldset>
		</form>
		<p></p>
	</section>
	<footer>
		<p>这本书中有大量的兼容不支持HTML5特性的解决方案，可以作为借鉴。比如，对于不支持color控件的浏览器可以这样用jQuery解决：</p>
		<pre>
			if(!hasColorSupport()) {
				$('input[type=color]').simpleColor();

			function hasColorSupport() {
				input = document.createElement('input');
				input.setAttribute('type', 'color');
				var hasColorType = (input.type !== 'text');

				//处理Chrome的部分实现
				if(hasColorType) {
					var testString = 'foo';
					input.value = testString;
					hasColorType = (input.value != testString);
				}
				return(hasColorType);
			}
		</pre>
		<p>以上方案仅是解决了Chrome浏览器的方法，其他还是不支持。因此，不要在这上面浪费时间。</p>
	</footer>
</article>
<article>
	<header>
		<h1>第4章 用CSS3打造更好的用户界面</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第5章 增强可访问性</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第6章 在canvas上绘图</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第7章 嵌入音频和视频</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第8章 柔化视觉体验</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第9章 客户端数据的使用</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第10章 使用其他API锦上添花</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第11章 未来的发展方向</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
</body>
</html>